<template>
  <div class="page-header-index-wide">
    <!-- <a-row :gutter="12">
      <a-col :xl="4">
        <a-form :form="form" style="margin-top: 25px" ref="loginForm" id="loginForm">
          <a-form-item prop="code">
            <a-select v-model="lanCode" size="large" @change="lanCodeChange">
              <a-select-option value="zh"> 中文 </a-select-option>
              <a-select-option value="en"> English </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row> -->
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card
          :loading="loading"
          :title="$t('homePage.purchaseToday')"
          data-step="1"
          :data-title="$t('homePage.purchaseToday')"
          :data-intro="$t('homePage.countDocuments')"
        >
          <a-tooltip :title="$t('homePage.countDocuments')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.todayBuy"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card
          :loading="loading"
          :title="$t('homePage.salesToday')"
          data-step="2"
          :data-title="$t('homePage.salesToday')"
          :data-intro="$t('homePage.statisticsDocuments')"
        >
          <a-tooltip :title="$t('homePage.statisticsDocuments')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.todaySale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card
          :loading="loading"
          :title="$t('homePage.retailToday')"
          data-step="3"
          :data-title="$t('homePage.retailToday')"
          :data-intro="$t('homePage.countRetail')"
        >
          <a-tooltip :title="$t('homePage.retailToday')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.todayRetailSale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.cumulativePurchaseInThisMonth')">
          <a-tooltip :title="$t('homePage.statisticsPurchase')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.monthBuy"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.cumulativeSalesInThisMonth')">
          <a-tooltip :title="$t('homePage.statisticsSales')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.monthSale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.cumulativeRetailSalesThisMonth')">
          <a-tooltip placement="left" :title="$t('homePage.countRetailMonth')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.monthRetailSale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.yesterdayPurchase')">
          <a-tooltip :title="$t('homePage.statisticsPurchaseDocuments')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.yesterdayBuy"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.yesterdaySales')">
          <a-tooltip :title="$t('homePage.statisticsTotalSales')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.yesterdaySale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.retailYesterday')">
          <a-tooltip :title="$t('homePage.countRetailDocuments')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.yesterdayRetailSale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.cumulativePurchaseThisYear')">
          <a-tooltip :title="$t('homePage.countPurchaseYear')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.yearBuy"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.cumulativeSalesThisYear')">
          <a-tooltip :title="$t('homePage.countTotalSalesYear')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.yearSale"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <chart-card :loading="loading" :title="$t('homePage.cumulativeRetailSalesThisYear')">
          <a-tooltip placement="left" :title="$t('homePage.countTotalRetailYear')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info :content="statistics.yearRetailSale"></head-info>
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <a-card
          :loading="loading"
          :bordered="false"
          :body-style="{ paddingRight: '5' }"
          data-step="4"
          :data-title="$t('homePage.purchaseStatistics')"
          :data-intro="$t('homePage.countTotalMonthly')"
        >
          <bar
            :title="$t('homePage.purchaseStatistics')"
            :height="barHeight"
            :yaxisText="yaxisText"
            :dataSource="buyPriceData"
          />
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <a-card
          :loading="loading"
          :bordered="false"
          :body-style="{ paddingRight: '5' }"
          data-step="5"
          :data-title="$t('homePage.salesStatistics')"
          :data-intro="$t('homePage.countTotalAmount')"
        >
          <bar
            :title="$t('homePage.salesStatistics')"
            :height="barHeight"
            :yaxisText="yaxisText"
            :dataSource="salePriceData"
          />
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px', marginBottom: '12px' }">
        <a-card
          :loading="loading"
          :bordered="false"
          :body-style="{ paddingRight: '5' }"
          data-step="6"
          :data-title="$t('homePage.retailStatistics')"
          :data-intro="$t('homePage.countTotalRetail')"
        >
          <bar
            :title="$t('homePage.retailStatistics')"
            :height="barHeight"
            :yaxisText="yaxisText"
            :dataSource="retailPriceData"
          />
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :sm="24" :md="24" :xl="24" :style="{ paddingRight: '0px', marginBottom: '6px' }">
        <a-card
          :bordered="false"
          :body-style="{ padding: '5' }"
          data-step="7"
          :data-title="$t('homePage.servicesAndCopyright')"
          :data-intro="$t('homePage.displayCopyrightInformation')"
        >
          <div class="hidden-xs" style="float: right">&copy; 2015-2030 {{ systemTitle }} V3.2</div>
          <a-tag v-if="tenant.type == 0" color="blue"
            >{{ $t('homePage.trialExpiration') }}：{{ tenant.expireTime }}</a-tag
          >
          <a-tag v-if="tenant.type == 0" color="blue"
            >{{ $t('homePage.trialUser') }}：{{ tenant.userCurrentNum }}/{{ tenant.userNumLimit }}</a-tag
          >
          <a-tag v-if="tenant.type == 1" color="blue"
            >{{ $t('homePage.serviceExpiration') }}：{{ tenant.expireTime }}</a-tag
          >
          <a-tag v-if="tenant.type == 1" color="blue"
            >{{ $t('homePage.authorizedUser') }}：{{ tenant.userCurrentNum }}/{{ tenant.userNumLimit }}</a-tag
          >
          <a v-if="hasExpire" style="color: red" :href="payFeeUrl" target="_blank">{{ $t('homePage.renewNow') }}</a>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Bar from '@/components/chart/Bar'
import { getLanCode } from '@/lang'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import Trend from '@/components/Trend'
import { getBuyAndSaleStatistics, buyOrSalePrice, getPlatformConfigByKey } from '@/api/api'
import { handleIntroJs } from '@/utils/util'
import { getAction, postAction } from '../../api/manage'

export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
  },
  data() {
    return {
      lanCode: getLanCode(),
      systemTitle: window.SYS_TITLE,
      systemUrl: window.SYS_URL,
      loading: true,
      center: null,
      statistics: {},
      barHeight: document.documentElement.clientHeight - 585,
      yaxisText: this.$t('reportQuery.amount'),
      buyPriceData: [],
      salePriceData: [],
      retailPriceData: [],
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      hasExpire: false,
      payFeeUrl: '',
      tenant: {
        type: '',
        expireTime: '',
        userCurrentNum: '',
        userNumLimit: '',
      },
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initInfo()
    this.initWithTenant()
  },
  mounted() {
    handleIntroJs('indexChart', 1)
  },
  methods: {
    lanCodeChange(lanCode) {
      this.$i18n.locale = lanCode
      this.$store.dispatch('setLanCode', lanCode)
      // this.$message({
      //   message: 'Switch Language Success',
      //   type: 'success'
      // })
      /* this.$nextTick(() => {
          this.show = false
        }) */
    },
    initInfo() {
      getBuyAndSaleStatistics(null).then((res) => {
        if (res.code === 200) {
          this.statistics = res.data
        }
      })
      buyOrSalePrice(null).then((res) => {
        if (res.code === 200) {
          this.buyPriceData = res.data.buyPriceList
          this.salePriceData = res.data.salePriceList
          this.retailPriceData = res.data.retailPriceList
        }
      })
      getPlatformConfigByKey({ platformKey: 'pay_fee_url' }).then((res) => {
        if (res && res.code === 200) {
          this.payFeeUrl = res.data.platformValue
        }
      })
    },
    initWithTenant() {
      getAction('/user/infoWithTenant', {}).then((res) => {
        if (res && res.code === 200) {
          this.tenant = res.data
          let currentTime = new Date() //新建一个日期对象，默认现在的时间
          let expireTime = new Date(res.data.expireTime) //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期
          let difftime = expireTime - currentTime //计算时间差
          //如果距离到期还剩5天就进行提示续费
          if (difftime < 86400000 * 5) {
            this.hasExpire = true
            //针对免费租户发送试用到期的消息提醒
            if (res.data.type === '0') {
              //先检查有无发送过，只发送一次
              getAction('/msg/getMsgCountByType', { type: '试用到期' }).then((res) => {
                if (res && res.code === 200) {
                  if (res.data.count === 0) {
                    //发送消息
                    let msgParam = {
                      msgTitle: this.$t('popup.trialExpiration'),
                      msgContent: this.$t('popup.theTrialUse'),
                      type: this.$t('homePage.trialExpiration'),
                    }
                    postAction('/msg/add', msgParam).then((res) => {
                      if (res && res.code === 200) {
                      }
                    })
                  }
                }
              })
            }
          }
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}
/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;
  &.center {
    text-align: center;
    padding: 0 32px;
  }
  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>